<template>

    <div>
      <div class="header-Main" style="margin-top: 10px; margin-left: 5px;"> 
        <el-input v-model="title" placeholder="输入内容" suffix-icon="el-icon-search" style="width: 500px;"></el-input>
        <el-button type="primary" style="margin: 0 20px 0 5px;" @click="handlget">查询</el-button>
        <el-button type="primary">
          <div @click="add" style="color: aliceblue;">增加<i class="el-icon-circle-plus-outline iconadd" style="font-size: 15px;"></i></div>
          </el-button>
      </div>
  
      <div v-if="this.tableData != null && this.tableData != ''">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
        border style="width: 100%">
  
          <el-table-column prop="id" label="ID" width="120">
          </el-table-column>
    
          <el-table-column prop="pic" label="图片" width="165">
            <template slot-scope="scope">
              <img :src="scope.row.pic" style="height: 140px; width: 140px;">
            </template>
          </el-table-column>
    
          <el-table-column prop="date" label="创建时间" width="160">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
    
          <el-table-column prop="title" label="标题" width="220">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
    
          <el-table-column prop="introduce" label="简介">
            <template slot-scope="scope">
              <p style="height: 130px;overflow-y: scroll;">{{ scope.row.introduce}}</p>
            </template>
          </el-table-column>
    
          <el-table-column prop="songmanager" label="歌曲管理" width="150">
            <template slot-scope="scope">
              <el-button type="primary" class="iconfont icon-yinle" @click="handlmanage(scope.row.id)"><span style="padding-left: 8px;">添加歌曲</span></el-button>
            </template>
          </el-table-column>
    
          <el-table-column width="150" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit"  circle @click="handlEditor(scope.row.id)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle @click="handlDelete(scope.row.id)"></el-button>
            </template>
          </el-table-column>
    
        </el-table> 
        <div class="pageion"> 
          <pagination :total="total" :PageSize="PageSize" :PageNum="PageNum" 
            @ChangeSize="changesize" @ChangeNum="changenum"></pagination>
        </div>
      </div>
      <div v-else>

      </div>
    </div>
  
  </template>
  
  <script>
  import pagination from '@/components/Pagination/index.vue'
  import { mapMutations, mapState } from 'vuex'
  export default {
  
    components:{
      pagination
    },
    created(){
      this.getAll()
    },
    data() {
        return {
          title:'',
          id: 1,
          tableData: [],
          total:10,
          PageSize:4,
          PageNum:1
        }
      },
  
      computed:{

      },
      methods:{
        ...mapMutations('editfo',['changeTitle','changeDatas']),
        ...mapMutations('song1',['getSingerId']),
        async getAll(){
          const res =await this.$axios.post(`SongList/SelectAll?PageNum=${this.PageNum}&PageSize=${this.PageSize}&title=${this.title}`)
          console.log(res.data)
          this.tableData=res.data
          this.total=res.total
        },
        changesize(val){
          this.PageSize=val
          this.getAll()
        },
        changenum(val){
          this.PageNum=val
          this.getAll()
        },
        async handlDelete(val){
          const res = await this.$axios.delete(`SongList/DeleteSongList/${val}`)
          console.log(res)
          this.$message.success(res.msg)
          this.getAll()
        },
        async handlEditor(val){
          const res = await this.$axios.get(`SongList/SelectById/${val}`)
          console.log(res)
          this.changeTitle('编辑')
          console.log("==+++++===+++0000)---")
          this.changeDatas(res)
          this.$router.push("/addsonglist")
  
        },
        add(){
          this.changeTitle('添加')
          this.$router.push("/addsonglist")
        },
        async handlget(){
          await this.getAll()
        },
        handlmanage(val){
          this.getSingerId(val)
          this.$router.push("/listsong")
        }
      }
  }
  </script>
  
  <style scoped lang="less">
  .header-Main{
    margin-bottom: 10px;
  }
  
  .iconadd{
    display: inline-block;
    font-size: 5px;
    padding-left: 5px;
  }
  
  .pageion{
    display: flex;
    margin-top: 30px;
    justify-content: center;
  }
  ::v-deep .el-table th{
      text-align: center;
    }
    ::v-deep .el-table td, .el-table th {
      text-align: center;
    }
  </style>